import { register } from '@antv/x6-vue-shape'
import LineChart from './components/LineChart.vue'
import { Cell } from '@antv/x6'
import { DataType } from '@yk/components/draw/shapes/type'

type DataOption =
  // 历史数据
  { dataType: 'historicalData', dataRange: number } |
  // 今日实时数据
  { dataType: 'liveDataToday' }
register({
  shape: 'LineChart',
  attrs: {
    body: {
      style: {
        padding: '10px 5px',
        backgroundColor: '#FFFFFF',
        borderStyle: 'solid',
        borderWidth: 0,
        borderColor: ''
      }
    }
  },
  component: LineChart,
  data: {
    dataConfig: {
      runModel: 'selfRun',
      deviceId: null,
      variableId: null,
      echartsOptions: {
        legend: { show: true },
        tooltip: { show: true },
        toolbox: { show: false },
        series: [{ itemStyle: { color: '#5470C6' } }]
        // yAxis: [{ splitLine: { lineStyle: { color: ['#EDEEF1'] } } }]
      },
      echartsConfig: {
        textColor: { color: '#000001' },
        splitLine: { color: '#EDEEF1' },
        area: {
          show: false,
          color: null
        }
      },
      dataOption: {} as DataOption,
      run (cell) {
        cell.data.expose.run()
      }
    },
    getAttrModules: () => {
      return [
        {
          title: '基本样式',
          group: 'Attrs',
          components: () => import('./components/BasicAttrs.vue'),
          solution: {}
        },
        {
          title: '图表样式',
          group: 'Attrs',
          components: () => import('./components/ChartAttrs.vue'),
          solution: {}
        },
        {
          title: '绑定设备变量',
          group: 'Data',
          components: () => import('../../components/BindDeviceVariable.vue'),
          solution: {
            isBindVariableId: true
          }
        },
        {
          title: '数据类型',
          group: 'Data',
          components: () => import('./components/DataType.vue'),
          solution: {}
        }
      ]
    }
  } as DataType
})
